//登录
'use strict';
import React, {Component} from 'react';
import styles from '../style/styles';
import Util from '../common/util';
import Icon from 'react-native-vector-icons/FontAwesome';
import GetCode from './getCode';//注册
import MyStroage from '../common/myStroage';
import * as URLconstant from '../constant/URLconstant'
import FIcon from 'react-native-vector-icons/Ionicons';
import LinearGradient from 'react-native-linear-gradient'
import Toast from '../common/ToastUtil'
import {
    Text,
    View,
    TextInput,
    TouchableOpacity,
    Animated,
    Easing,
    Image,
    NativeModules,
    Alert, DeviceEventEmitter
} from 'react-native';

export default class login extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            username: '',
            password: '',
            secureTextEntry: true,
            userrand: '',
            weixin: new Animated.Value(0), // init opacity 0
            qq: new Animated.Value(0), // init opacity 0
            user_name: '',
            headimgurl: '',
        };
    }

    getCode(title, type) {
        //type 1:注册  2:修改密码
        this.props.navigator.push({
            component: GetCode,
            passProps: {
                title: title,
                type: type,
            }
        })
    }


    componentDidMount() {
        if (this.props.route) {
            let params = this.props.route.params
            this.params = params
        }
        var timing = Animated.timing
        Animated.sequence([
                timing(this.state.weixin, {
                    toValue: 1, duration: 300, easing: Easing.linear,
                }),
                Animated.delay(150),
                timing(this.state.qq, {
                    toValue: 1, duration: 300, easing: Easing.linear,
                }),
            ]
        ).start();
    }


    //点击登录
    userLogin() {
        let username = this.state.username;
        let userpassword = this.state.password;
        username = Util.stringTrim(username);
        userpassword = Util.stringTrim(userpassword);
        let data = [];
        data['phone_mob'] = username;
        data['password'] = userpassword;
        this.userLoginRequest(data);


    }

    userLoginRequest(userData) {
        let that = this;
        let userLoginUrl = URLconstant.USERLOGIN_URL;
        Util.post(userLoginUrl, userData, function (datas) {
            LOG(JSON.stringify(datas))
            if (datas['status'] == 0 && datas.data.user_id != '') {
                MyStroage.saveStorage('userinfo', JSON.stringify(datas));
                DeviceEventEmitter.emit('login')
                //这是给用户个人 首页调用的.
                if (that.props.onLoginSuccess != null) {
                    that.props.onLoginSuccess(datas.data.user_id);
                    // that.props.navigation.pop();
                }

                //这是给其他组件调用,比如商品详情里面的添加到.购物车
                if (that.params.isPop == 1) {
                    that.goBack()
                    that.props.navigation.pop();
                }
            } else {
                Toast.show(datas.msg)
            }

        }, this.errorcallback);
    }


    goBack() {
        let params = this.props.route.params
        if (params.callback) {
            params.callback();
        }
    }

    errorcallback(err) {
        LOG('errorcallback==' + err);
    }

    confirmBtn() {
        let that = this;
        let username = that.state.username;
        let password = that.state.password;
        if (username != '' && password != '') {
            return (
                <TouchableOpacity style={styles.login_btn} onPress={() => this.userLogin()}>
                    <Text style={styles.login_btn_txt}>登录</Text>
                </TouchableOpacity>
            )
        } else {
            return (
                <View style={styles.no_login_btn}>
                    <Text style={styles.login_no_txt}>登录</Text>
                </View>
            )
        }
    }

    eye() {
        let that = this;
        let secureTextEntry = that.state.secureTextEntry;
        if (secureTextEntry == true) {
            return (
                <Icon name={'eye-slash'} size={15} color={'#fff'}/>
            )
        } else {
            return (
                <Icon name={'eye'} size={15} color={'#fff'}/>
            )
        }
    }

    _pop() {
        let that = this;
        that.props.navigation.pop();
    }

    showBackIcon() {
        let from = this.props.from
        if (from == 1) {
            return null
        } else {
            return (
                <TouchableOpacity
                    style={{height: 40, position: 'absolute', top: 40, left: 20, backgroundColor: 'rgba(0,0,0,0)'}}
                    onPress={() => this._pop()}>
                    <FIcon name={'ios-arrow-back'} size={30} color="#fff"/>
                </TouchableOpacity>
            )
        }
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <LinearGradient
                    colors={['#5886ff', '#329cfa']}
                    start={{x: 0, y: 0}}
                    end={{x: 1, y: 1}}
                    locations={[0, 0.75]}
                >
                    <View style={styles.login_wrap}>
                        <View style={{height: 90, justifyContent: 'center', alignItems: 'center', marginTop: 60}}>
                            <Text style={{fontSize: 36, color: '#fff', backgroundColor: 'rgba(0,0,0,0)'}}>登录</Text>
                        </View>
                        <View style={styles.login_list}>
                            <Image
                                resizeMode="cover"
                                style={{height: 35, width: 35, marginLeft: 5, marginRight: 10}}
                                source={require('../imgs/loginuesr.png')}/>
                            <TextInput
                                style={styles.login_input}
                                placeholder={'手机号'}
                                placeholderTextColor={'#fff'}
                                clearButtonMode={'while-editing'}
                                onChangeText={(text) => this.setState({username: text})}
                                underlineColorAndroid={'transparent'}
                            />
                        </View>
                        <View style={styles.login_list}>
                            <Image
                                resizeMode="cover"
                                style={{height: 35, width: 35, marginLeft: 5, marginRight: 10}}
                                source={require('../imgs/loginpass.png')}/>
                            <TextInput
                                style={styles.login_input}
                                placeholder={'请输入密码'}
                                placeholderTextColor={'#fff'}
                                clearButtonMode={'while-editing'}
                                secureTextEntry={this.state.secureTextEntry}
                                onChangeText={(text) => this.setState({password: text})}
                                underlineColorAndroid={'transparent'}
                            />
                            <TouchableOpacity style={[styles.hide_password, {backgroundColor: 'rgba(0,0,0,0)'}]}
                                              onPress={() => this.setState({secureTextEntry: !this.state.secureTextEntry})}>
                                {this.eye()}
                            </TouchableOpacity>
                        </View>
                        <View style={{height: 65}}>
                            {this.confirmBtn()}
                        </View>
                        <View style={styles.resiger_wrap}>
                            <Text onPress={() => this.getCode('快速注册', 1)}
                                  style={{color: '#fff', backgroundColor: 'rgba(0,0,0,0)'}}>快速注册</Text>
                            <Text onPress={() => this.getCode('修改密码', 2)}
                                  style={{color: '#fff', backgroundColor: 'rgba(0,0,0,0)'}}>忘记密码</Text>
                        </View>
                    </View>
                </LinearGradient>
                <View style={{
                    width: Util.size.width,
                    height: 49,
                    backgroundColor: "#fff",
                    position: "absolute",
                    bottom: -49
                }}>
                </View>
                {this.showBackIcon()}
            </View>
        )
    }
}